<template>
	<view class="">
		<view class="container" @click="show = false">
			<view class="list">
				<view class="item">
					<view class="t">大区名称</view>
					<view class="b">
						<!-- 	<input type="text" v-model="params.game_zone_name" placeholder="请输入" placeholder-class="pclass1"
							@input="input" /> -->
						<uni-data-select v-model="params.game_zone_name" :localdata="range"></uni-data-select>
					</view>
					<!-- <view class="s-list" v-if="show">
						<view class="i u-l-1" v-for="(item,index) in list1" :key="index" @click="changeName(item)">
							<rich-text :nodes="item.name2"></rich-text>
						</view>
					</view> -->
				</view>
				<view class="item">
					<view class="t">角色ID</view>
					<view class="b">
						<input type="text" v-model="params.account" placeholder="请输入" placeholder-class="pclass1" />
					</view>
				</view>
				<view class="item">
					<view class="t">微信号</view>
					<view class="b">
						<input type="text" v-model="params.wechat" placeholder="请输入" placeholder-class="pclass1" />
					</view>
				</view>
				<view class="item">
					<view class="t">手机号</view>
					<view class="b">
						<input maxlength="11" type="text" v-model="params.phone" placeholder="请输入" placeholder-class="pclass1" />
					</view>
				</view>
				<view class="item2">
					<view class="l">是否默认</view>
					<view class="r">
						<switch :checked="params.checked" color="#FF6F07" @change="switchChange" />
					</view>
				</view>
			</view>
		</view>
		<view class="footer_btn">
			<view class="cont">
				<view class="btn" @click="submit" :class="{ on: isOn }">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
import { userSaccountAdd, userSaccountEdit, zoneList, zoneallList } from '@/common/http.api.js';

export default {
	data() {
		return {
			list1: [],
			name: '',
			show: false,
			params: {
				game_zone_name: '',
				account: '',
				wechat: '',
				phone: '',
				checked: false
			},
			can: false,
			type: 'add',

			range: []
		};
	},
	computed: {
		isOn() {
			return this.params.game_zone_name == '' || this.params.account == '' || this.params.wechat == '';
		}
	},
	onLoad(o) {
		this.type = o.type;
		zoneallList().then((res) => {
			this.range = res.data.list.map((i) => ({
				text: i.name,
				value: i.name
			}));
		});
		if (this.type == 'edit') {
			let data = uni.getStorageSync('editAddressData');
			this.params = data;
			this.params.checked = data.isDefault == 1;
			this.params.game_zone_name = data.gameZoneName;
			this.params.account = data.account;
			this.params.wechat = data.wechat;
			this.params.phone = data.phone;
		}
	},
	methods: {
		change(e) {
			// console.log(e);
		},
		switchChange(e) {
			this.params.checked = e.detail.value;
		},
		input(e) {
			this.name = e.detail.value;
			if (e.detail.value) {
				this.$throttling(() => {
					this.list1 = [];
					this.show = false;
					this.getlist();
				}, 500);
			}
		},
		getlist() {
			zoneList({
				name: this.name
			}).then((res) => {
				if (res.code == 200) {
					this.list1 = res.data.list;
					this.list1.forEach((item) => {
						if (item.name.includes(this.name)) {
							const wrappedStr = item.name.replace(new RegExp(this.name, 'g'), `<span style="color:#000">${this.name}</span>`);
							item.name2 = wrappedStr;
						} else {
							item.name2 = item.name;
						}
					});
					this.show = this.list1.length > 0;
				}
			});
		},
		submit() {
			this.params.is_default = this.params.checked ? 1 : 0;
			if (this.isOn) {
				this.$modal.msg('请完整填写信息');
				return;
			}
			if (this.type == 'add') {
				this.$throttling(() => {
					userSaccountAdd(this.params).then((res) => {
						if (res.code == 200) {
							this.$modal.msg('添加成功');
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 500);
						}
					});
				});
			} else {
				userSaccountEdit(this.params).then((res) => {
					if (res.code == 200) {
						this.$modal.msg('修改成功');
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 500);
					}
				});
			}
		},
		blur() {
			this.list1 = [];
			this.show = false;
		},
		changeName(item) {
			console.log(item);
			this.params.game_zone_name = item.name;
			this.show = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx;

	.f-btn {
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 30rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		color: #fff;
		height: 100rpx;
		background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
		border-radius: 20rpx;
		opacity: 0.54;
		text-align: center;
	}

	.on {
		opacity: 1;
	}

	.list {
		.item2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;

			.l {
				font-size: 32rpx;
				color: #11192d;
				height: 50rpx;
				line-height: 50rpx;
			}

			.r {
				text-align: right;
			}
		}

		.item {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;
			position: relative;

			.s-list {
				position: absolute;
				left: 2rpx;
				right: 2rpx;
				top: 140rpx;
				background-color: #fff;
				border-radius: 0 0 20rpx 20rpx;
				box-shadow: 0rpx 2rpx 2rpx 0rpx rgba(0, 0, 0, 0.25);
				z-index: 999;
				border: 2rpx solid #f4f4f4;
				padding: 0 30rpx;

				.i {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					color: #979797;

					span {
						color: #666;
					}
				}
			}

			.t {
				font-size: 32rpx;
				color: #11192d;
				height: 50rpx;
				line-height: 50rpx;
			}

			.b {
				margin-top: 10rpx;
				height: 60rpx;
				line-height: 60rpx;
				color: #11192d;
				font-size: 28rpx;

				input {
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					color: #11192d;
					font-size: 28rpx;
				}
			}
		}
	}
}
</style>
